import {
  SafetyCertificateOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { ProDescriptions } from "@ant-design/pro-components";
import {
  Alert,
  Card,
  Checkbox,
  Col,
  Descriptions,
  Divider,
  Row,
  Switch,
  Table,
  Tag,
  Typography,
} from "antd";

import React from "react";

import "./index.less";

const { Title } = Typography;

const Page48: React.FC = () => {
  return (
    <div className="page48-page">
      <Title level={2} className="page-title">
        用户权限管理系统
      </Title>
      <Alert
        type="info"
        showIcon
        message="演示角色、权限与成员的多视角展示"
        style={{ marginBottom: 16 }}
      />

      <Row gutter={16}>
        <Col xs={24} lg={12}>
          <Card
            title={
              <span>
                <TeamOutlined /> 角色列表
              </span>
            }
          >
            <Table
              rowKey="id"
              size="small"
              columns={[
                { title: "角色", dataIndex: "name" },
                { title: "成员数", dataIndex: "count", width: 100 },
                {
                  title: "状态",
                  dataIndex: "enabled",
                  width: 120,
                  render: (v) => <Switch checked={v} />,
                },
              ]}
              dataSource={[
                { id: 1, name: "管理员", count: 3, enabled: true },
                { id: 2, name: "运营", count: 8, enabled: true },
                { id: 3, name: "访客", count: 21, enabled: false },
              ]}
              pagination={false}
            />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card
            title={
              <span>
                <SafetyCertificateOutlined /> 权限面板
              </span>
            }
          >
            <Descriptions column={1} size="small" bordered>
              <Descriptions.Item label="内容管理">
                <Checkbox defaultChecked>查看</Checkbox>
                <Checkbox defaultChecked>新建</Checkbox>
                <Checkbox>编辑</Checkbox>
                <Checkbox>删除</Checkbox>
              </Descriptions.Item>
              <Descriptions.Item label="用户中心">
                <Checkbox defaultChecked>查看</Checkbox>
                <Checkbox>新建</Checkbox>
                <Checkbox>编辑</Checkbox>
                <Checkbox>删除</Checkbox>
              </Descriptions.Item>
              <Descriptions.Item label="系统设置">
                <Checkbox>查看</Checkbox>
                <Checkbox>新建</Checkbox>
                <Checkbox>编辑</Checkbox>
                <Checkbox>删除</Checkbox>
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
      </Row>

      <Divider />

      <Card
        title={
          <span>
            <UserOutlined /> 成员详情
          </span>
        }
      >
        <ProDescriptions
          column={3}
          dataSource={{
            name: "王小明",
            role: "管理员",
            email: "admin@example.com",
            status: "启用",
            tags: ["核心", "保密"],
          }}
          columns={[
            { title: "姓名", dataIndex: "name" },
            { title: "角色", dataIndex: "role" },
            { title: "邮箱", dataIndex: "email" },
            { title: "状态", dataIndex: "status" },
            {
              title: "标签",
              dataIndex: "tags",
              render: (_, r) =>
                r.tags.map((t: string) => (
                  <Tag key={t} color="blue">
                    {t}
                  </Tag>
                )),
            },
          ]}
        />
      </Card>
    </div>
  );
};

export default Page48;
